<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="首页2.0.css" />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<!-- <style>
    @font-face {
        font-family: 'iconfont';
        src:url('font/iconfont.woff2?t=1671436514946') format('woff2'),
        url('font/iconfont.woff?t=1671436514946') format('woff'),
        url('font/iconfont.ttf?t=1671436514946') format('truetype');
    }
    .iconfont {
        font-family: "iconfont" !important;
        font-size: 18px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
</style> -->
<body>
    <!-- 首页 -->
    <div class="home">
        <div class="top">
            <div class="welcome">欢迎您使用本系统</div>
            <div class="top_button">
                <span id="login_enter">登录</span>
                |
                <span id="res_enter">注册</span>
            </div>
        </div>
        <div class="main">
            <div id="director">
                <div class="home_logo">
                    <img src="images/云顶logo2.png" width="120px" height="100px">
                </div>
                <div class="director_item" id="default">首页</div>
                <div class="director_item">请假</div>
                <div class="director_item">调研学</div>
                <div class="director_item">个人信息</div>
                <div class="director_item">关于我们</div>
            </div>
            <div class="banner">
                <div class="banner_item" style="background-color: #666666;">
                    <canvas id="canvas" width="1399" height="1039"></canvas>
                </div>
                <div class="banner_item"></div>
                <div class="banner_item"></div>
                <div class="banner_item"></div>
                <div class="banner_item"></div>
            </div>
            <div class="big_wel">
                欢迎使用研学请假系统
            </div>
            <div class="bottom">
                追光的人，终会光芒万丈！加油，云子们！
            </div>
        </div>


        <!-- 登录 -->
        <div class="login">
            <div class="login1">
                <div class="login_logo">
                    <img src="images/云顶logo2.png" width=58px height=56px>
                </div>
                <div class="lclose" id="lclose"></div>
            </div>
            <div class="picture">

            </div>
            <div class="login2">
                <div class="messege">
                    <input type="text" placeholder="账号" class="log_account">
                    <input type="password" placeholder="密码" class="log_pwd">
                </div>
                <button id="login_button">登录</button>
                <button id="login_res_btn">注册账号</button>
                <div class="login_QR">
                    <img src="images/QRcode.png" width=30px height=30px>
                </div>
            </div>

            <!-- 提示 -->
            <div class="err_account_empty">
                账号为空，请您先输入账号哦
            </div>
            <div class="err_password_empty">
                密码为空，请您先输入密码哦
            </div>
            <div class="log_prompt">
                <!-- 通过模板字符串动态显示各种返回信息 -->
            </div>
            <!-- <div class="err_account_undefined">
                该账号不存在哟，请您先完成注册
            </div> -->
        </div>


        <!-- 注册 -->
        <div class="register">
            <div class="register_logo">
                <img src="images/云顶logo2.png" width=58px height=56px>
            </div>
            <div class="rclose" id="rclose"></div>
            <!-- <span class="iconfont" id="rclose">&#xe6a2;</span> -->

            <div class="register_content">
                <div class="inform1">
                    <span>姓名</span>
                    <input type="text" class="rusername">
                    <span class="inform1_gender">性别</span>
                    <input type="text" class="rgender">
                    <span>方向</span>
                    <input type="text" class="rdirection">
                    <span class="inform1_num">期数</span>
                    <input type="text" class="rterm">
                </div>
                <div class="inform2">
                    <span>邀请码</span>
                    <input type="text" class="invite_code">
                    <span>电话号</span>
                    <input type="text" class="rphone_num">
                    <span>密码</span>
                    <input type="password" class="rpassword">
                    <span>确认密码</span>
                    <input type="password" class="confirm_rpassword">
                </div>
                <span class="res_require">
                    注：密码要求长度为8——18位字符，必须同时包含字母和数字
                </span>
            </div>
            <button id="register_btn">注册</button>

            <!-- 提示 -->
            <div class="res_prompt">
                <!-- 通过模板字符串动态显示返回各种信息 -->
            </div>
        </div>
    </div>
    
    

    <script src="首页.js"></script>
</body>
</html>